<template>
  <div class="boxtc">
    <div class="hedaertc">捷赛各设备运行详情</div>
    <div class="contenttc">
      <div class="contenttcTop">
        <div class="contenttcTopItems">
          <div class="contenttcTopItemsTitle">
            设备数采最新记录
          </div>
          <div class="contenttcTopItemsContent">
            <sheBeiShuJuLieBiao :dataType="'最新'"></sheBeiShuJuLieBiao>
          </div>
        </div>
        <div class="contenttcTopItems">
          <div class="contenttcTopItemsTitle">
            S1今日运行状态
          </div>
          <div class="contenttcTopItemsContent">
            <sheBeiZhuangTai :id="pieArray[0]" ref="sheBei1" ></sheBeiZhuangTai>
          </div>
        </div>
        <div class="contenttcTopItems">
          <div class="contenttcTopItemsTitle">
            S2今日运行状态
          </div>
          <div class="contenttcTopItemsContent">
            <sheBeiZhuangTai :id="pieArray[1]" ref="sheBei2"></sheBeiZhuangTai>

          </div>
        </div>
        <div class="contenttcTopItems">
          <div class="contenttcTopItemsTitle">
            S3今日运行状态
          </div>
          <div class="contenttcTopItemsContent">
            <sheBeiZhuangTai :id="pieArray[2]" ref="sheBei3"></sheBeiZhuangTai>
          </div>
        </div>
        <div class="contenttcTopItems">
          <div class="contenttcTopItemsTitle">
            S4今日运行状态
          </div>
          <div class="contenttcTopItemsContent">
            <sheBeiZhuangTai :id="pieArray[3]" ref="sheBei4"></sheBeiZhuangTai>
          </div>
        </div>
        <div class="contenttcTopItems">
          <div class="contenttcTopItemsTitle">
            S5今日运行状态
          </div>
          <div class="contenttcTopItemsContent">
            <sheBeiZhuangTai :id="pieArray[4]" ref="sheBei5"></sheBeiZhuangTai>
          </div>
        </div>
      </div>
      <!-- 下部分 -->
      <div class="contenttcButtom">
        <div class="contenttcButtomItems">
          <div class="contenttcButtomItemsTitle">
            设备今日运行占比数据
          </div>
          <div class="contenttcButtomItemsContent">
            <sheBeiShuJuLieBiao :dataType="'今日运行'"></sheBeiShuJuLieBiao>
          </div>
        </div>
        <div class="contenttcButtomItems">
          <div class="contenttcButtomItemsTitle">
            设备过去7天运行占比数据
          </div>
          <div class="contenttcButtomItemsContent">
            <sheBeiShuJuLieBiao :dataType="'过去7天'"></sheBeiShuJuLieBiao>
          </div>
        </div>
        <div class="contenttcButtomItems">
          <div class="contenttcButtomItemsTitle">
            设备本月运行占比数据
          </div>
          <div class="contenttcButtomItemsContent">
            <sheBeiShuJuLieBiao :dataType="'本月运行'"></sheBeiShuJuLieBiao>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
// 设备数采最新记录
import sheBeiShuJuLieBiao from './com/sheBeiShuJuLieBiao.vue';
// 设备S1~S4
import sheBeiZhuangTai from './com/sheBeiZhuangTai.vue';
export default {
  components: {
    sheBeiShuJuLieBiao,
    sheBeiZhuangTai,

  },
  data() {
    return {
      pieArray: ['sheZhen1', 'sheZhen2', 'sheZhen3', 'sheZhen4', 'sheZhen5'],//公共饼图组件的id不能重复
    };
  },

  mounted() {
    this.getSheBei1List()
    this.getSheBei2List()
    this.getSheBei3List()
    this.getSheBei4List()
    this.getSheBei5List()
    this.querys()

  },

  methods: {
    querys() {
      var thats = this
      // 每隔3分钟就刷新一次接口
      setInterval(() => {
        thats.getSheBei1List()
        thats.getSheBei2List()
        thats.getSheBei3List()
        thats.getSheBei4List()
        thats.getSheBei5List()
      },180000)
    },
    // 请求接口，获取设备S1数据
    getSheBei1List() {
      // 设备S1
      axios({
        method: "get",
        url: `${window.location.origin}/apigateway/api/widget/1659497593964441601`,
        headers: {
          apiKey: "a92a7db58b234595951bb2b39fcf6430",
        },
      }).then((res) => {
        let Data = {}
        Data.title = '数控角钢打字冲孔剪切生产线'
        Data.data = res.data.data.map(items => {
          return {
            value: items.hous,
            name: items.groupBy_status
          }
        })
        this.$refs.sheBei1.options = Data
        this.$refs.sheBei1.initCharts()
      });
    },
    // 请求接口，获取设备S2数据
    getSheBei2List() {
      // 设备S2
      axios({
        method: "get",
        url: `${window.location.origin}/apigateway/api/widget/1659497644279312386`,
        headers: {
          apiKey: "a92a7db58b234595951bb2b39fcf6430",
        },
      }).then((res) => {
        let Data = {}
        Data.title = 'AMADA-HDS1303NT折弯机'
        Data.data = res.data.data.map(items => {
          return {
            value: items.hous,
            name: items.groupBy_status
          }
        })
        this.$refs.sheBei2.options = Data
        this.$refs.sheBei2.initCharts()
      });
    },
    // 请求接口，获取设备S3数据
    getSheBei3List() {
      // 设备S3
      axios({
        method: "get",
        url: `${window.location.origin}/apigateway/api/widget/1659497779121991682`,
        headers: {
          apiKey: "a92a7db58b234595951bb2b39fcf6430",
        },
      }).then((res) => {
        let Data = {}
        Data.title = 'AMADA-HDS8025NT折弯机'
        Data.data = res.data.data.map(items => {
          return {
            value: items.hous,
            name: items.groupBy_status
          }
        })
        this.$refs.sheBei3.options = Data
        this.$refs.sheBei3.initCharts()
      });
    },
    // 请求接口，获取设备S4数据
    getSheBei4List() {
      // 设备S4
      axios({
        method: "get",
        url: `${window.location.origin}/apigateway/api/widget/1659497419384926209`,
        headers: {
          apiKey: "a92a7db58b234595951bb2b39fcf6430",
        },
      }).then((res) => {
        let Data = {}
        Data.title = 'S4今日运行状态'
        Data.data = res.data.data.map(items => {
          return {
            value: items.hous,
            name: items.groupBy_status
          }
        })
        this.$refs.sheBei4.options = Data
        this.$refs.sheBei4.initCharts()
      });
    },
    // 请求接口，获取设备S5数据
    getSheBei5List() {
      // 设备S5
      axios({
        method: "get",
        url: `${window.location.origin}/apigateway/api/widget/1668144196250603521`,
        headers: {
          apiKey: "a92a7db58b234595951bb2b39fcf6430",
        },
      }).then((res) => {
        let Data = {}
        Data.title = 'S5今日运行状态'
        Data.data = res.data.data.map(items => {
          return {
            value: items.hous,
            name: items.groupBy_status
          }
        })
        this.$refs.sheBei5.options = Data
        this.$refs.sheBei5.initCharts()
      });
    },
  },

};
</script>
<style>
.boxtc {
  overflow: auto;
  width: 100%;
  height: 100vh;
  /* padding: 0 0 10px 0; */
  background: url("/@/assets/bgc1.png") 100% 100% no-repeat;
  background-size: 100% 100%;
  /* background-color: #101129; */
  background: #002754;

}

.hedaertc {
  width: 100%;
  height: 80px;
  background: url("https://app.maibozhineng.com/oss/files/img/header-bg123.png") 100% 100% no-repeat;
  background-size: 100% 100%;
  margin-top: 8px;
  font-size: 28px;
  font-family: Segoe UI letiable-Semibold Display, Segoe UI letiable;
  font-weight: normal;
  color: #ffffff;
  line-height: 80px;
  text-align: center;
}

.contenttc {
  /* background-color: crimson; */
  width: 100%;
  height: calc(100% - 108px);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 1);
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  background: rgba(43, 43, 43, 1);
  -webkit-box-shadow: 1px 0px 0px 0px rgba(255, 255, 255, 0.07) inset;
  border-radius: 0px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: rgba(249, 249, 249, 0.3);
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0) inset;
  border-radius: 10px;
}

.contenttcTop {
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 20px;
}

.contenttcTopItems {
  width: 100%;
  margin-right: 10px;
  height: 470px;
  /* background: #004491; */
  /* background-color: var(--widget-content-bg-color)!important; */
  background-color: rgba(255, 255, 255, 0.06);
  border: 2px solid transparent;
  border-image: linear-gradient(135deg, #4287f5, #6696ffe0) 1;
}

.contenttcTopItems:last-child {
  margin-right: 0;
}

.contenttcTopItemsTitle {
  padding: 8px 10px;
  box-sizing: border-box;
  font-size: 23px;
  font-weight: 600;
  width: 100%;
  color: #fff;
  border-bottom: 2px solid #3f65ae;
}

.contenttcTopItemsContent {
  width: 100%;
  height: calc(100% - 48px);
}

.contenttcButtom {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-height: 470px;
  padding: 0 10px;
  margin-top: 10px;
}

.contenttcButtomItems {
  width: 100%;
  min-height: 470px;
  /* background: #004491; */
  background-color: rgba(255, 255, 255, 0.06);
  margin-right: 10px;
  border: 2px solid transparent;
  border-image: linear-gradient(135deg, #4287f5, #6696ffe0) 1;
}

.contenttcButtomItems:last-child {
  margin-right: 0px;
  width: 49%;
}

.contenttcButtomItems:nth-child(2) {
  width: 50%;
}

.contenttcButtomItemsTitle {
  padding: 8px 10px;
  box-sizing: border-box;
  font-size: 23px;
  font-weight: 600;
  width: 100%;
  color: #fff;
  border-bottom: 2px solid #3f65ae;
}

.contenttcButtomItemsContent {
  width: 100%;
  height: calc(100% - 48px);
}

/* 新布局end */
</style>
